/**
 * 通用消息展示组件
 * 用于在页面上显示成功、错误或提示消息
 */

// 添加消息展示所需的样式
function addMessageStyles() {
    // 检查是否已经添加了样式
    if (document.getElementById('message-styles')) {
        return;
    }

    const styleElement = document.createElement('style');
    styleElement.id = 'message-styles';
    styleElement.textContent = `
        #message-area {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 1000;
            display: flex;
            flex-direction: column;
            gap: 10px; /* Space between messages */
        }
        .message {
            padding: 10px 20px;
            border-radius: 5px;
            font-size: 16px;
            color: white;
            opacity: 1;
            transition: opacity 0.5s ease-in-out;
        }
        .message.hide {
            opacity: 0;
        }
        .message.success {
            background-color: #28a745;
        }
        .message.error {
            background-color: #dc3545;
        }
        .message.gray {
            background-color: gray;
        }
    `;
    document.head.appendChild(styleElement);
}

// 确保消息区域存在
function ensureMessageArea() {
    let messageArea = document.getElementById('message-area');
    if (!messageArea) {
        messageArea = document.createElement('div');
        messageArea.id = 'message-area';
        document.body.appendChild(messageArea);
    }
    return messageArea;
}

/**
 * 显示消息
 * @param {string} message - 要显示的消息内容
 * @param {string} type - 消息类型 (success, error, gray)
 */
function showMessage(message, type) {
    // 添加样式
    addMessageStyles();
    
    // 确保消息区域存在
    const messageArea = ensureMessageArea();

    // 创建消息元素
    const messageElement = document.createElement('div');
    messageElement.textContent = message;
    if(!type){
        type = 'gray';
    }
    messageElement.className = `message ${type}`;
    messageArea.appendChild(messageElement);

    // 自动在3秒后移除消息
    setTimeout(() => {
        messageElement.classList.add('hide'); // 开始淡出
        messageElement.addEventListener('transitionend', () => {
            messageElement.remove(); // 过渡结束后移除元素
        }, { once: true });
    }, 3000);
}

// 在页面加载时初始化消息区域
document.addEventListener('DOMContentLoaded', function() {
    addMessageStyles();
    ensureMessageArea();
});

// 导出函数供其他脚本使用
window.showMessage = showMessage;

function getWebSocket(){
    const cookieValue = document.cookie
              .split('; ')
              .find(row => row.startsWith('ws_port='))
              ?.split('=')[1];
    const port = cookieValue || '3001';
    return new WebSocket(`ws://localhost:${port}`);
}